<script>
import TreeTableContainerList from '@/mixins/treeTableContainerList'
import AjaxStore from '@/utils/store/proxyAjax'

export default {
  name: 'importPeople',
  inject: ['Dialog', 'user'],
  props: {
    deptName: String,
    deptId: [String, Number]
  },
  mixins: [TreeTableContainerList],
  data() {
    return {
      isShowTitle: true,

      tree: {
        width: '280',
        height: '200',
        accordion: false,
        isShowHeader: false,
        treeMenuButtonList: [],
        treeOperateButtonList: [],
        showCheckbox: false,
        selectTree: {
          disabled: true,
          treeParams: {
            get: {
              url: '/v1/dataProvider/getGroupTreeList',
              idKey: 'id',
              nextNodeKey: 'pid'
            }
          },
          valueToLabelParams: {
            url: '/v1/dataProvider/getGroupName',
            idKey: 'groupId'
          },
          clearable: true,
          selectCodeVal: this.$store.getters.groupId || '',
          selectCodeKey: 'groupId',
          visibleChangeLoad: true
        },
        emptyTopNode: {
          expanded: true,
          id: '',
          leaf: false,
          text: '部门树'
        },
        nextNodeKey: 'node',
        idKey: 'deptId',
        search: {
          searchKey: 'deptName'
        },
        title: '',
        getNextChildNode: this.getNextNode,
        delNode: this.delNode
      },
      // pidKey: 'pid',
      nodeCheckedKey: 'checked',
      nodeChildrenKey: 'children',
      nodeLeafKey: 'leaf',
      nodeIdKey: 'id',
      nodeLabelKey: 'text',

      currentNode: null,
      dialogType: '',

      labelWidth: '80px',

      // table
      tableUniqueId: 'userId', // 表格唯一标识字符
      inputPlaceholder: '输入姓名或账号搜索',

      // containerList
      containerListTitle: '已导入人员',
      titleKey: '当前部门',
      titleValue: '',

      selectedList: [],
      containerList: [],
      idKey: 'deptId',
      allPath: '',
      pUserId: '',
      getNextNodeUrl: '/v1/dataProvider/getImportDeptmentTreeList',
      getAllPathUrl: '/v1/yq/common/getAllPath',
      store: new AjaxStore({
        url: '/v1/sys/user/getUserListByDeptId'
      }),
      columns: [
        {
          prop: 'userNo',
          label: '账号',
          sortable: true,
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'userName',
          label: '姓名',
          sortable: true,
          // width: '150',
          'show-overflow-tooltip': false,
          'header-align': 'center',
          scopedSlots: {
            default: scope => {
              return (
                <c-popover
                  trigger='hover'
                  ref='popover'
                  on-show={this.getUserAllPath.bind(
                    this,
                    scope.row.userId,
                    scope.row.userName
                  )}
                  placement='top'
                  popper-class={this.setClassName(scope.row.userId)}>
                  {this.allPath}
                  <div slot='reference' class='name-wrapper user-name'>
                    {scope.row.userName}
                  </div>
                </c-popover>
              )
            }
          }
        },
        {
          prop: 'deptName',
          label: '部门',
          sortable: true,
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'dataStatus',
          label: '状态',
          sortable: true,
          width: '100',
          'header-align': 'center',
          formatter: (row, column, cellValue) => (cellValue ? '启用' : '停用')
        }
      ]
    }
  },
  watch: {
    'Dialog.visible': {
      immediate: true,
      handler(val) {
        val && this.getInfo()
        val &&
          this.$nextTick(() => {
            this.$refs.tree.load()
          })
      }
    },
    data: {
      // immediate: true,
      handler() {
        this.handleCheckCheckbox()
      }
    }
  },
  methods: {
    setClassName(userId) {
      this.pUserId = userId
      return `el-tooltip__popper is-dark username-popover username-${userId}-popover`
    },
    getUserAllPath(id, userName) {
      return this.request({
        url: this.getAllPathUrl,
        method: 'get',
        params: { userId: id }
      })
        .then(({ success, message }) => {
          if (success) {
            this.$nextTick(() => {
              const popover = document.getElementsByClassName(
                `username-${id}-popover`
              )[0]
              popover.classList.remove('el-popover')
              popover.classList.remove('el-popper')
            })
            const changePath = message.replace(/\//g, '\\')
            this.allPath = changePath
          } else {
            this.allPath = userName
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getInfo() {
      this.titleValue = this.user.$refs.tree.getNodeById(
        this.user.q_deptId
      ).data.text
      this._getHavedImportPeople()
    },
    _getHavedImportPeople() {
      this.user
        .getHavedImportPeople({ deptId: this.user.q_deptId })
        .then(({ success, data, message }) => {
          if (success) {
            this.containerList = data
            this.$refs.table.clearSelection()
            this.handleCheckCheckbox()
          } else {
            this.$message({
              type: 'error',
              message: message
            })
            this.dialogType = ''
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    handleInputClick(ev, val) {
      const params = {}
      if (this.$refs.tree.currentNode) {
        params.q_deptId = this.$refs.tree.currentNode.key
        params.q_name = val
        this.store._searchParams = params
        this.$refs.table.load(1, this.store.limit)
      }
    },
    formaterTagContent(item) {
      return item.deptName + '-' + item.userName
    }
  }
}
</script>

<style lang="scss">
.username-popover {
  .popper__arrow {
    display: none;
  }
}
</style>
